import { Search, MessageSquarePlus, Download, User } from 'lucide-react'

const Sidebar = () => {
  return (
    <aside className="w-64 flex flex-col border-r border-gray-200 bg-white">
      {/* 顶部搜索框 */}
      <div className="p-4">
        <div className="relative">
          <input
            type="text"
            placeholder="搜索"
            className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"
          />
          <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
        </div>
      </div>

      {/* 新对话按钮 */}
      <button className="mx-4 flex items-center gap-2 text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg">
        <MessageSquarePlus className="h-5 w-5" />
        <span>开启新对话</span>
      </button>

      {/* 对话历史列表 */}
      <div className="flex-1 overflow-y-auto">
        <div className="px-4 py-2 text-sm text-gray-500">7天内</div>
        <div className="space-y-1 px-2">
          {/* 这里可以map渲染最近7天的对话列表 */}
        </div>

        <div className="px-4 py-2 text-sm text-gray-500">30天内</div>
        <div className="space-y-1 px-2">
          {/* 这里可以map渲染30天内的对话列表 */}
        </div>
      </div>

      {/* 底部功能区 */}
      <div className="p-4 border-t border-gray-200 space-y-2">
        <button className="w-full flex items-center gap-2 hover:bg-gray-100 px-4 py-2 rounded-lg">
          <Download className="h-5 w-5" />
          <span>下载 App</span>
          <span className="text-xs text-white bg-blue-500 px-1.5 rounded">NEW</span>
        </button>
        <button className="w-full flex items-center gap-2 hover:bg-gray-100 px-4 py-2 rounded-lg">
          <User className="h-5 w-5" />
          <span>个人信息</span>
        </button>
      </div>
    </aside>
  )
} 

export default Sidebar; 